<!DOCTYPE html>
<html>
	<head>

		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- 		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> -->


		<link rel="stylesheet" href="css/bootstrap.3.4.1.css">
		<link rel="stylesheet" href="css/main.css">

		<style type="text/css">
			.panel.panel-primary .color {
				color: #FFFFFF;
			}

			.panel.panel-success .color {

				color: #3c763d;
				;
			}
		</style>
		<title>面板 表/14.7 demo </title>

		<!-- 
		 panel 类型 
		 
		 panel-default
		 panel-primary
		 panel-success
		 panel-info
		 panel-warning
		 panel-danger
		 
		 -->
	</head>
	<body>
		<div class="panel panel-default">

			<div class="panel-heading">
				<div class="panel-title">用户统计</div>

				<div class="small text-muted ">用户统计详细情况</div>
			</div>

			<div class="panel-body">
				Panel content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos nemo officiis
				vero
				commodi expedita architecto ipsum necessitatibus tenetur error beatae sequi porro dolor quam
				voluptates
				quaerat vel neque asperiores.
			</div>


			<div class="panel-footer">
				<div class="small text-muted">数据更新与 5秒 前 </div>

			</div>

		</div>





		<div class="panel panel-primary">

			<div class="panel-heading">

				<h2 class="panel-title">用户统计</h2>

				<div class="small text-muted color ">用户统计详细情况</div>

			</div>

			<div class="panel-body">
				Panel content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos nemo officiis
				vero
				commodi expedita architecto ipsum necessitatibus tenetur error beatae sequi porro dolor quam
				voluptates
				quaerat vel neque asperiores.
			</div>


			<div class="panel-footer">

				<div class="small text-muted">
					Panel footer primary
				</div>


			</div>

		</div>






		<div class="panel panel-success">

			<div class="panel-heading">

				<div class="panel-title">用户统计</div>
				<div class="small text-muted color ">用户统计详细情况</div>

			</div>


			<div class="panel-body">
				Panel content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos nemo officiis
				vero
				commodi expedita architecto ipsum necessitatibus tenetur error beatae sequi porro dolor quam
				voluptates
				quaerat vel neque asperiores.
			</div>


			<div class="panel-footer">

				Panel footer

			</div>

		</div>




		<div class="panel panel-warning">

			<div class="panel-heading">用户统计</div>

			<div class="panel-body">
				Panel content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos nemo officiis
				vero
				commodi expedita architecto ipsum necessitatibus tenetur error beatae sequi porro dolor quam
				voluptates
				quaerat vel neque asperiores.
			</div>


			<div class="panel-footer ">Panel foote warning</div>

		</div>




		<div class="panel panel-info">

			<div class="panel-heading">用户统计</div>

			<div class="panel-body">
				Panel content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos nemo officiis
				vero
				commodi expedita architecto ipsum necessitatibus tenetur error beatae sequi porro dolor quam
				voluptates
				quaerat vel neque asperiores.
			</div>


			<div class="panel-footer">Panel footer info </div>

		</div>




		<div class="panel panel-danger">

			<div class="panel-heading">用户统计</div>

			<div class="panel-body">
				Panel content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quos nemo officiis
				vero
				commodi expedita architecto ipsum necessitatibus tenetur error beatae sequi porro dolor quam
				voluptates
				quaerat vel neque asperiores.
			</div>


			<div class="panel-footer">Panel footer danger</div>

		</div>

	</body>
</html>
